<template>
  <section>
    <h2>
      已经完成 <span id="donecount">{{ DoneNum }}</span>
    </h2>
    <ul id="donelist">
      <li v-for="todo in CountNum" :key="todo.id">
        <input
          type="checkbox"
          checked="checked"
          @change="handleCheck(todo.id)"
        />
        <p>{{ todo.title }}</p>
        <a href="javascript:;" @click="handleDelete(todo.id)"></a>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  name: "DoneList",
  props: ["todos"],
  methods: {
    handleCheck(id) {
      // this.checkTodo(id);    //使用使用自定义事件
      this.$bus.$emit("checkTodo", id); //使用全局事件总线
    },
    handleDelete(id) {
      // this.deleteTodo(id);//使用使用自定义事件
      this.$bus.$emit("deleteTodo", id); //使用全局事件总线
    },
  },
  computed: {
    DoneNum() {
      return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);
    },
    CountNum() {
      return this.todos.filter((todo) => todo.done);
    },
  },
};
</script>

<style scoped>
section {
  margin: 0 auto;
}
h2 {
  position: relative;
}
p {
  display: block;
  padding: 0 50px;
  /* margin-block-start: 10px;
  margin-block-end: 10px;
  margin-inline-start: 0px;
  margin-inline-end: 0px; */
}
span {
  position: absolute;
  top: 2px;
  right: 5px;
  display: inline-block;
  padding: 0 5px;
  height: 20px;
  border-radius: 20px;
  background: #e6e6fa;
  line-height: 22px;
  text-align: center;
  color: #666;
  font-size: 14px;
}
ul,
li {
  padding: 0;
  list-style: none;
}
</style>